<template>
	<statusBarVue title="PC登录" :isShowBar="true" :isShowLeft="true" :isMyBgi="true" />
	<view class="scan-login-page" :style="pageHaveBarStyle">
		<view class="scan-login-page-group">
			<button class="btn login-btn" @click="handleScanLogin">
				<text>授权登录</text>
			</button>
			<button class="btn clear-btn" @click="handleScanLoginClear">
				<text>取 消</text>
			</button>
		</view>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';

	import {
		postQrConfirm,
	} from '@/utils/api.js';

	import {
		publics
	} from '@/mixins/publics.js';

	export default {
		mixins: [publics],
		components: {
			statusBarVue
		},
		data() {
			return {
				qr_id: ''
			}
		},
		onLoad(options) {
			if ((options.qr_id)) {
				this.qr_id = options.qr_id;
			}
		},
		created() {

		},
		methods: {
			// PC取消
			handleScanLoginClear(){
				uni.navigateBack()
			},
			// PC扫码登录
			handleScanLogin() {
				const postData = {
					qr_id: this.qr_id,
					token: 'Bearer ' + uni.getStorageSync('_token')
				};

				postQrConfirm(postData).then(res => {
					if (res.code === 200) {
						uni.showModal({
							title: '提示',
							content: '操作成功！',
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack()
								}
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.scan-login-page {
		margin: auto;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 99;
		background-color: #F2F3F7;
		padding: 16px 3.66vw;
		box-sizing: border-box;

		.scan-login-page-group {
			width: calc(100vw - 3.66vw - 3.66vw);
			position: absolute;
			bottom: 0;
			top: 0;
			margin: auto;
			left: 0;
			right: 0;
			height: 25vh;

			.list {
				.list-i {
					height: 22px;
					line-height: 20px;
					text-indent: 2ch;

					&::before {
						display: inline-block;
						content: "";
						width: 6px;
						height: 6px;
						border-radius: 6px;
						margin-right: 10px;
						vertical-align: middle;
						background-color: #000;
					}
				}
			}

			.btn {
				line-height: 1.8;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 30rpx;

				text {
					font-size: 20px;
					font-weight: bold;
					margin-left: 10px;
					color: #ffffff;
				}

				&.login-btn {
					background-color: #22A366;

					text {
						color: #ffffff;
					}
				}

				&.clear-btn {
					
					text {
						color: #000;
					}
				}

			}
		}
	}
</style>